<template>
  <div class="mainbox">
    <div class="topbox">
      <el-input
        placeholder="请输入套餐名称"
        v-model="name"
        style="width: 250px"
        clearable
      >
        <i
          slot="prefix"
          class="el-input__icon el-icon-search"
          @click="handleSearch"
        ></i>
      </el-input>
      <div class="topboxletf">
        <el-link type="danger" style="margin: 0 20px">批量删除</el-link>
        <el-divider direction="vertical"></el-divider>
        <el-link type="primary" style="margin: 0 20px">批量启售</el-link>
        <el-divider direction="vertical"></el-divider>
        <el-link type="danger" style="margin: 0 20px">批量停售</el-link>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="$router.push({ name: 'AddSetmenu' })"
          >新增套餐</el-button
        >
      </div>
    </div>

    <div class="table">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="name" label="套餐名称"> </el-table-column>
        <el-table-column label="图片">
          <template slot-scope="scope">
            <img
              :src="`${env}/common/download?name=${scope.row.image}`"
              alt=""
              style="width: 40px"
            />
          </template>
        </el-table-column>
        <el-table-column prop="categoryName" label="菜品分类">
        </el-table-column>
        <el-table-column prop="price" label="售价"> </el-table-column>
        <el-table-column prop="status" label="售卖状态">
          <template slot-scope="scope">
            {{ scope.row.status === 1 ? "起售" : "停售" }}
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="最后操作时间">
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <el-link type="primary">修改</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link type="primary">
              <!-- <el-popconfirm title="确认调整该账号的状态" @onConfirm=handleChangeStatus(scope.row) > -->
              {{ scope.row.status === 1 ? "停售" : "起售" }}
              <!-- </el-popconfirm> -->
            </el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link type="danger">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Pagination
      @pagination="init"
      :total="total"
      :page.sync="pageInfo.page"
      :limit.sync="pageInfo.pageSize"
    />
  </div>
</template>

<script>
import { getSetmenu, changeSetmenuStatus } from "@/api/setmenu";
// import Pagination from "@/components/Pagination";
// import SearchInput from "@/components/SearchInput";
export default {
  components: { Pagination, SearchInput },
  data() {
    return {
      env: process.env.VUE_APP_BASE_API,
      name: "",
      placeholder: "请输入套餐名称",
      currentPage: 1,
      multipleSelection: [],
      tableData: [],
      total: 0,
      pageInfo: {
        page: 1,
        pageSize: 10,
      },
    };
  },
  methods: {
    init(names) {
      this.name = names;
      let params;
      if (this.name) {
        params = { ...this.pageInfo, name: this.name };
      } else {
        params = { ...this.pageInfo };
      }
      getSetmenu(params).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleDeleteSetmenu(row) {
      console.log(1);
      DeleteSetmenu({ ids: row.map((item) => item.id).join() }).then(() => {
        this.init();
      });
    },
    handleChangeSetmenuStatus(status, row) {
      changeSetmenuStatus(status, {
        ids: row.map((item) => item.id).join(),
      }).then(() => {
        this.$message.success("改变账号状态成功");
        this.init();
      });
    },
    handleSearch() {
      this.pageInfo.page = 1;
      this.init();
    },
    handleEdit(id) {
      this.$router.push({ name: "EditSetmenu", query: { isEdit: "true", id } });
    },
  },
  created() {
    this.init();
  },
};
</script>

<style>
.topbox {
  display: flex;
  justify-content: space-between;
}

.table {
  margin-top: 10px;
}
</style>
